<!-- 退换货详情页面 -->
<template>
  <div>
    <!-- 这里dialog 建议给个固定宽度 不要给百分比 因为你的内容是固定的 width="'701px'" -->
    <el-dialog title="退换货详情" :visible.sync="showDialog" :before-close="handleClose" top="5%" class="scaled-dialog">
      <div class="dialog-content">
        <div>
          <p class="text">退货进度</p>
        </div>
        <el-divider></el-divider>
        <div>
          <div class="steps-container">
            <!-- 这只是一种实现的写法 通过当前的curStep动态控制样式 来实现选中的效果 -->
            <div v-for="(item, index) in stepsList" :key="index" @click="handleClickStep(item)" class="steps-info">
              <div :class="item.value === returnstatus.status ? 'active' : 'label'">
                {{ item.label }}
              </div>
              <div class="dot-container">
                <!-- 圆的大小自行修改 线的长度也是 可以随意调整 前后能接上就行 -->
                <div class="dot"></div>
                <!-- 在当前状态之前的都是实线 -->
                <div v-if="index !== stepsList.length - 1" :class="item.value < returnstatus.status ? ' solid-line active' : 'dashed-line'
                  "></div>
              </div>
              <!-- <div class="time" :class="item.value === returnstatus.status ? 'active' : ''" v-if="stepsList.value">
                {{ objData.createTime }}
              </div> -->
            </div>
          </div>
        </div>
        <div class="div-bottom">
          <span class="text">退货单消息</span>
        </div>
        <el-divider></el-divider>
        <div>
          <p class="align-text">退货单号：{{ rowData.orderId }}</p>
        </div>
        <div class="order-info">
          <span class="order-number">订单编号：{{ rowData.id }}</span>
          <el-link type="primary" class="align-text">查看订单详情</el-link>
        </div>
        <div class="div-bottom">
          <span class="text">商品信息</span>
        </div>
        <el-divider></el-divider>
        <!-- 表格 -->
        <div>
          <ProductInfoTable :data="info" :price="tableData.orderAmount" />
        </div>
      </div>
      <!-- 对话框底部，可以是操作按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="handleClose">取 消</el-button>
        <el-button @click="handleClose">修改收货信息</el-button>
        <el-button class="el-button--purple" @click="handleClose">发 货</el-button>
      </span>

    </el-dialog>
  </div>
</template>

<script>
import { getreturnchangeDetail } from '../../../api/api'
import ProductInfoTable from "./ProductInfoTable.vue";
export default {
  name: "returnOExchangeOrderVue",
  components: {
    ProductInfoTable,
  },
  data() {
    return {
      objData: {},
      returnstatus: {},
      // dialogVisible: true,    //是否打开对话框
      price: 11099, //商品总价格
      // orderId:'12',
      // ruturnId:'21',
      // status:'2',
      tableData: [],
      info : [],
      stepsList: [
        { label: "申请中", time: "", value: 1 },
        { label: "商家已审核，退回商品", time: "", value: 2 },
        { label: "商品确认收货", time: "", value: 3 },
        { label: "完成", time: "", value: 4 },
        { label: "已取消", time: "", value: 5 },
      ],
      //  status: 2, //抵达到的步骤
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default: () => ({})
    }

  },
  computed: {
    showDialog: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("closeDialog", val);
      },
    },
  },
  mounted() {
    this.getShopData()
    console.log(this.rowData);
    this.info = [{
      "commodityName" : this.rowData.commodityName,
      "payNumber":this.rowData.orderCommodityNumber,
      "spData":this.rowData.spData,
    }]
  },
  methods: {
    handleClickStep(val) {
      this.status = val.value;
    },
    handleClose() {
      this.$emit("closeDialog", false);
    },
    async getShopData() {
      try {
        const res = await getreturnchangeDetail(this.rowData.id);
        if (res.data.code == 200) {
          this.objData = res.data.result.listVOList.find(item => item.returnId === this.rowData.id)
          this.returnstatus = res.data.result.listVOList.find(item => item.status == this.rowData.returnOfGoodsStatus)
          console.log(this.objData)
          // console.log(list_data);


        }
      } catch (error) {
        console.log(error)
        // console.error('There was an error!', error);  
      }
    }
  },


};
</script>

<style scoped>
.dialog-scrollable .el-dialog__body {
  max-height: 400px;
  overflow-y: auto;
  /* padding: 20px; */
}

.cell-content {
  word-wrap: break-word;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div-bottom {
  margin-top: 20px;
}

.order-info {
  display: flex;
  align-items: center;
}

.order-number {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0px;
  margin-right: 10px;
}

.text-right {
  margin-top: 20px;
  text-align: left;
  padding-left: 580px;
}

/*商品总价格排列 */
.text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 22.4px;
  color: rgba(52, 69, 99, 1);
}

.container {
  padding-left: 10px;
  /* width: 701px; */
}

.container>>>.el-table .cell {
  white-space: pre-line;
}

.el-button--purple

/*底部发货按钮*/
  {
  background-color: #722ed1;
  /* 紫色背景 */
  border-color: #722ed1;
  /* 紫色边框 */
  color: #fff;
  /* 白色文字 */
}

.steps-container {
  width: 100%;
  padding-left: 50px;
  display: flex;
}

.steps-info {
  width: 200px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.steps-info .label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0px;
  color: #04b9ad;
  margin-bottom: 5px;
}

.active {
  color: #fd8e19;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0px;
  margin-bottom: 5px;
}

.steps-info .dot-container {
  position: relative;
  display: flex;
  width: 50px;
}

.solid-line {
  position: absolute;
  top: 4px;
  left: 36px;
  width: 200px;
  border-bottom: 1px solid #04b9ad;
}

.dashed-line {
  position: absolute;
  top: 4px;
  left: 36px;
  width: 200px;
  border-bottom: 1px dashed #04b9ad;
}

.steps-info .dot {
  width: 8px;
  height: 8px;
  line-height: 8px;
  margin-bottom: 5px;
  margin-left: 30px;
  border-radius: 50px;
  background-color: #04b9ad;
}

.steps-info .time {
  font-size: 12px;
}

/**底部按钮样式和背景 */

/* 修改dialog底部颜色 */
/deep/ .el-dialog__footer {
  /* background-color: blue; */
  font-size: 14px;
  font-weight: 500;
  margin-top: 52px;
  /* letter-spacing: 0px; */

}

::v-deep .el-table .cell {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0px;
}

/*表示表格文字样式 */
.align-text {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0px;
}

/**货单编号文字格式 */
</style>
